<template>
	<view>

		<view style="width: 100%;height: 100VH;justify-content: center;display: flex;padding-top: 50rpx;" @touchstart="start"
		 @touchmove.stop.prevent="ing" @touchend="end">
			<view class="uni_dian" style="border: #007AFF solid 1rpx;" :style="{transform: coverLeft}"></view>
			<view class="uni_dian" :style="{transform: coverTransform}"></view>
			<view class="uni_dian" style="border: #4CD964 solid 1rpx;" :style="{transform: coverRight}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coverTransform: 'translate(0px,0px) scale(1,1)',
				coverLeft: 'translate(10px,0px) scale(0,0)',
				coverRight: 'translate(-10px,0px) scale(0,0)',
				startX: 0,
				startY: 0,
			}
		},
		methods: {
			start(e) {
				this.startX = e.touches[0].clientX;
				this.startY = e.touches[0].clientY;
			},
			ing(e) {
				var moveDistanceX = e.touches[0].clientX - this.startX;
				var moveDistanceY = e.touches[0].clientY - this.startY;
				var temp = (moveDistanceY + 100) / 100;
				var temp2 = moveDistanceY / 100;
				this.coverTransform = `translateY(${moveDistanceY}px) scale(${temp},${temp})`;

				var leftX = 0 - moveDistanceY / 10;
				var rightX = moveDistanceY / 10;
				this.coverLeft = `translate(${leftX}px,${moveDistanceY}px) scale(${temp2},${temp2})`;
				this.coverRight = `translate(${rightX}px,${moveDistanceY}px) scale(${temp2},${temp2})`;

			},
			end(e) {
				this.coverTransform = 'translateY(0px) scale(1,1)';
				this.coverLeft = 'translate(10px,0px) scale(0,0)';
				this.coverRight = 'translate(-10px,0px) scale(0,0)';
				this.moveY = 0;
			}
		}
	}
</script>

<style>
	.uni_dian {
		background-color: #333333;
		width: 10rpx;
		height: 10rpx;
	}
</style>
